<script setup lang="ts">
import { computed } from 'vue'

const emit = defineEmits(['click'])

const props = defineProps({
  chil: {
    type: Array,
    default: () => [] as any
  }
})

const chils = computed(() => {
  return <any>props.chil
})

const clickItem = (e: any) => {
  emit('click', e)
}
</script>

<template>
  <template v-for="(val, index) in chils">
    <el-sub-menu
      :index="val.id"
      :key="index"
      v-if="val.children && val.children.length > 0"
      @click.stop
    >
      <template #title>
        <svg-icon :name="val.icon" />
        <el-tooltip effect="dark" :content="val.text" placement="right">
          <div class="w-[80px] truncate">{{ val.text }}</div>
        </el-tooltip>
      </template>
      <sub-item :chil="val.children" />
    </el-sub-menu>
    <template v-else>
      <el-menu-item :index="val.id" :key="index" @click="clickItem(val)">
        <template #title>
          <svg-icon :name="val.icon" />
          <el-tooltip effect="dark" :content="val.text" placement="right">
            <div class="w-[80px] truncate">{{ val.text }}</div>
          </el-tooltip>
        </template>
      </el-menu-item>
    </template>
  </template>
</template>

<style lang="scss" scoped></style>
